<template>
  <c-loading :loading="loading" :bottomSafe="false">
    <view class="my container">
      <view class="user-center-card">
        <view class="header" @tap="toLogin">
          <view class="avatar">
            <c-img default-src="/assets/imgs/default/avatar.png" :src="state.avatarUrl" />
          </view>
          <view class="name">
            {{ state.nickName }}
            <view v-if="state.level" class="tag" :style="`background:${getLevelColor(state.level)}`">{{ state.levelName }}</view>
          </view>
          <view class="grow"></view>
          <view class="setting" @tap="tryToLink('/pages/my/setting', true)">
            <view class="icon icon-setting"></view>
          </view>
        </view>
      </view>
      <view class="content-wrapper">
        <view class="cell-box-group">
          <view class="title">
            我的订单
            <view class="more" @tap="tryToLink('/pagesOrder/order/index')">全部订单</view>
          </view>
          <view class="order-box">
            <c-badge :number="orderCount[0]" :hide="!orderCount[0]" offset-x="-44rpx" offset-y="16rpx">
              <view class="order-item" @tap="tryToLink('/pagesOrder/order/index?status=1')">
                <image class="img" src="/assets/imgs/payment.png" />
                <view>待付款</view>
              </view>
            </c-badge>
            <c-badge :number="orderCount[10]" :hide="!orderCount[10]" offset-x="-44rpx" offset-y="16rpx">
              <view class="order-item" @tap="tryToLink('/pagesOrder/order/index?status=2')">
                <image class="img" src="/assets/imgs/wait_send.png" />
                <view>待发货</view>
              </view>
            </c-badge>
            <c-badge :number="orderCount[20]" :hide="!orderCount[20]" offset-x="-44rpx" offset-y="16rpx">
              <view class="order-item" @tap="tryToLink('/pagesOrder/order/index?status=3')">
                <image class="img" src="/assets/imgs/received.png" />
                <view>待收货</view>
              </view>
            </c-badge>
            <view class="order-item" @tap="tryToLink('/pagesOrder/order/index?status=4')">
              <image class="img" src="/assets/imgs/evaluate.png" />
              <view>评价</view>
            </view>
            <c-badge :number="orderCount[70]" :hide="!orderCount[70]" offset-x="-44rpx" offset-y="16rpx">
              <view class="order-item" @tap="tryToLink('/pagesOrder/aftersales/index')">
                <image class="img" src="/assets/imgs/sales_after.png" />
                <view>售后/退款</view>
              </view>
            </c-badge>
          </view>
        </view>
        <view class="cell-box-group" v-if="state.level > 0">
          <view class="title">
            我的账户
            <view class="more" @tap="tryToLink('/pagesBus/account/log')">佣金记录</view>
          </view>
          <view class="flex-between pad">
            <view class="mini">
              账户余额：
              <c-number :value="state.balance" class="price" />
            </view>
            <c-button type="primary" plain size="mini" @tap="tryToLink('/pagesBus/account/withdrawal')">去提现</c-button>
          </view>
        </view>
        <view class="cell-box-group" v-for="(menus, i) in menuGroup" :key="i">
          <template v-for="(item, index) in menus">
            <c-cell-box v-if="!item.hide || !item.hide()" :key="index" @tap="item.hanlder" :open-type="item.openType" :label="item.title" :append="item.icon" :arrow="!item.icon" />
          </template>
        </view>
      </view>
    </view>
    <template #popup>
      <share-popup code="Default" path="pages/home/index" ref="shareRef"></share-popup>
    </template>
  </c-loading>
</template>
<script setup>
import { CLoading, CCellBox, CBadge, CButton, CNumber } from '@/components';
import CImg from '@/components/CImg.vue';
import { View } from '@tarojs/components';
import SharePopup from '@/pages/my/components/share-popup.vue';
import { useDidShow } from '@tarojs/taro';
import { userGetInfo } from '@/api/user';
import { queryCount } from '@/api/order';
import { reactive, ref, shallowRef } from 'vue';
import { useRouter, afterLogin, isLogin, useLoading } from '@/hooks';

const shareRef = shallowRef();
const router = useRouter();
const state = reactive({
  nickName: '',
  level: ''
});

const getLevelColor = level => {
  switch (level) {
    case 0:
      return 'var(--color-gray)';
    case 1:
      return 'var(--color-info)';
    case 2:
      return '#cb9d55';
    default:
      return 'rgba(0,0,0,.8)';
  }
};
const orderCount = ref({});
const toLogin = () => {
  if (isLogin() && state.phone) return;
  router.link('./login').then(async r => {
    await loadingUserInfo(true);
  });
};

const tryToLink = (url, ref) => {
  if (isLogin() && state.phone)
    return router.push(url).then(r => {
      if (ref && r) {
        Object.assign(state, r);
      }
    });
  router.link('./login').then(async r => {
    await loadingUserInfo();
  });
};

const loadingUserInfo = async clear => {
  Object.assign(state, await userGetInfo(clear));
};

const menuGroup = [
  [
    {
      title: '收货地址',
      hanlder: () => {
        router.push('/pages/my/address/index');
      }
    },
    {
      title: '浏览记录',
      hanlder: () => {
        router.push('/pages/my/goods/history');
      }
    },
    {
      title: '我的收藏',
      hanlder: () => {
        router.push('/pages/my/goods/collects');
      }
    },
    {
      title: '我的优惠券',
      hanlder: () => {
        router.push('/pages/my/coupon');
      }
    }
  ],
  [
    {
      title: '我的邀请',
      hide: () => state.level != 1,
      hanlder: () => {
        router.push('/pages/my/invite/index');
      }
    },
    {
      title: '我的团队',
      hide: () => state.level != 2,
      hanlder: () => {
        router.push('/pages/my/team/index');
      }
    },
    {
      title: '邀请加入',
      hanlder: () => {
        shareRef.value.show();
      },
      hide: () => state.level == 0
    }
  ],
  [
    {
      title: '建议反馈',
      openType: 'feedback'
    },
    {
      title: '联系客服',
      openType: 'contact',
      icon: 'icon-service'
    }
  ]
];
const { loading, restart } = useLoading(async () => {
  await afterLogin();
  Object.assign(state, await userGetInfo());
  orderCount.value = await queryCount();
});

useDidShow(async () => {
  if (!loading.value) {
    orderCount.value = await queryCount();
    Object.assign(state, await userGetInfo());
  }
});
</script>
<style lang="scss">
.my.container {
  background-color: var(--color-background);
  .user-center-card {
    width: 100%;
    height: 480px;
    background-image: url(https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 20px;
    padding-top: 80px;
    padding-top: calc(var(--safe-head));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    .header {
      margin-bottom: 48px;
      height: 96px;
      line-height: 48px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: var(--color-default);
      position: relative;
      .icon-refresh {
        font-size: 30px;
        font-weight: bold;
        background-color: var(--color-caption);
        border-radius: 50%;
        color: var(--color-gray);
        padding: 8px;
      }
      .avatar {
        width: 96px;
        height: 96px;
        border-radius: 48px;
        overflow: hidden;
      }

      .name {
        font-size: 36px;
        line-height: 48px;
        color: var(--color-default);
        font-weight: bold;
        margin-left: 24px;
        margin-right: 16px;
        display: flex;
        align-items: center;
      }
      .setting {
        padding: 10px;
        font-size: 46px;
      }
    }
    .tag {
      display: inline-block;
      line-height: 2em;
      font-size: 20px;
      padding: 0 18px;
      color: var(--color-caption);
      font-weight: bold;
      margin-left: 10px;
      border-radius: 10px;
    }
  }

  .content-wrapper {
    padding: 0 20px;
    top: calc(var(--safe-head) + 140px);
    position: relative;
    z-index: 2;
    .title {
      font-size: 30px;
      font-weight: bold;
      padding: 25px 0 25px 30px;
      position: relative;
      .more {
        font-weight: normal;
        font-size: 24px;
        right: 30px;
        top: 25px;
        color: var(--color-gray);
        position: absolute;
      }
    }
    .pad {
      align-items: center;
      padding: 0 30px 20px;
      .mini {
        font-size: 26px;
        .price {
          font-weight: bold;
          font-size: 36px;
          color: var(--color-danger);
        }
      }
    }
  }
  .order-box {
    display: flex;
    margin-top: -20px;
    & > view {
      width: 20%;
      flex-grow: 1;
    }

    .order-item {
      text-align: center;
      flex-grow: 1;
      padding: 28px 0 30px;
      font-size: 24px;
      .img {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
      }
    }
  }

  .cell-box-group {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--color-caption);
    position: relative;
    width: 100%;
  }

  .footer__version {
    text-align: center;
    margin-top: 50px;
    color: var(--color-gray);
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 50px;
  }
}

.share-popup {
  border-radius: 10px;
  margin-top: 30px;
  padding: 0 0 20px;
  .share-btn {
    width: 140rpx;
    text-align: center;
    font-size: 24px;
    color: var(--color-gray);
    .img {
      height: 80rpx;
      width: 80rpx;
      margin: 0 auto 15rpx;
    }
  }
}
</style>
